<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="75%"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="170px"
    >
      <el-form-item label="分享类型" prop="shareType">
        {{changetype(dataForm.shareType)}}
      </el-form-item>
      <el-form-item label="助力成功文案" v-if="dataForm.shareType === 8 || dataForm.shareType === 9">
        {{dataForm.congratulationInfo}}
      </el-form-item>
      <el-form-item label="任务完成文案" v-if="dataForm.shareType === 10">
        {{dataForm.congratulationInfo}}
      </el-form-item>
      <el-form-item label="邀请助力文案" v-if="dataForm.shareType === 8 || dataForm.shareType === 9">
        {{dataForm.invitationInfo}}
        <div style="color: #999;" v-if="dataForm.shareType === 8">{{invitationInfoPerson}}</div>
        <div style="color: #999;" v-if="dataForm.shareType === 9">{{invitationInfoTeam}}</div>
      </el-form-item>
      <el-form-item label="邀请卡标题文案" v-if="dataForm.shareType === 8 || dataForm.shareType === 9 || dataForm.shareType === 10">
        {{dataForm.sharePageDesc}}
      </el-form-item>
      <el-form-item label="邀请卡文案" prop="sharePageInfo">
        {{dataForm.sharePageInfo}}
      </el-form-item>
      <el-form-item label="邀请卡背景图" prop="sharePageImageUrls" v-if="dataForm.shareType!=7">
        <img v-for="item in fileLists" :src="item.url" alt="" style="width: 130px;height: 130px;margin: 0 15px;">
      </el-form-item>
      <el-form-item v-if="dataForm.shareType==7" label="邀请卡背景图" prop="sharePageImageUrls" class="noteshare">
        <!--邀请卡一坨-->
        <div class="invitecardbg" v-for="(item, index) in invitecard">
          <div class="flexinvite">
            <div class="img"><img :src="item.bgImgUrl" alt=""></div>
            <div class="flexcontent">
              <div class="flex">
                <div class="title">缩略图背景色</div>
                <div class="inputtext">{{item.thumbColor}}</div>
              </div>
              <div class="flex">
                <div class="title">缩略图</div>
                <div class="inputtext">
                  <img style="width: 60px;height: 60px;" :src="item.thumbImg" alt="">
                </div>
              </div>
              <div class="flex">
                <div class="title">样式名称</div>
                <div class="inputtext">{{item.styleName}}</div>
              </div>
              <div class="flex">
                <div class="title">名称颜色</div>
                <div class="inputtext">{{item.thumbnailTextColor}}</div>
              </div>
            </div>
            <div class="flexcontent">
              <div class="flex">
                <div class="title">日期文案颜色</div>
                <div class="inputtext">{{item.dateTextColor}}</div>
              </div>
              <div class="flex">
                <div class="title">邀请卡文案颜色</div>
                <div class="inputtext">{{item.sloganTextColor}}</div>
              </div>
              <div class="flex">
                <div class="title">二维码文案颜色</div>
                <div class="inputtext">{{item.qrcodeDescTextColor}}</div>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="邀请卡分享二维码链接" prop="sharePageShareUrl">
        {{dataForm.sharePageShareUrl}}
      </el-form-item>
      <el-form-item label="分享图标" prop="shareImg" v-if="dataForm.shareType !== 10">
        <img :src="dataForm.shareImg" v-if="dataForm.id" style="width: 140px;height: 140px;">
        <img :src="dataForm.shareImg" v-if="!dataForm.id" style="width: 140px;height: 140px;">
      </el-form-item>
      <el-form-item label="分享标题" prop="shareTitle" v-if="dataForm.shareType !== 10">
        {{dataForm.shareTitle}}
      </el-form-item>
      <el-form-item label="分享文案" prop="shareDesc" v-if="dataForm.shareType !== 10">
        {{dataForm.shareDesc}}
      </el-form-item>
      <el-form-item label="分享链接" prop="shareUrl" v-if="dataForm.shareType !== 10">
        {{dataForm.shareUrl}}
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">返回</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    data() {
      return {
        fileList2: [],
        invitecard: [],
        invitationInfoPerson: '例：已为[partnerName]的<br>心愿助力[credit]学分，邀请您一起为[partnerName]<br>的心愿助力',
        invitationInfoTeam: '例：[captainName]的团队<br>为[partnerName]的心愿助力[day]天，<br>邀请您一起为[partnerName]<br>的心愿助力!',
        visible: false,
        fileLists: [],
        placeholders: '[nickname]为分享者昵称，例：[nickname]邀请您一起学习',
        disableds: false,
        dataForm: {
          id: 0,
          shareDesc: '',
          shareImg: '',
          shareType: 1,
          sharePageImageUrls: [],
          sharePageInfo: '',
          sharePageShareUrl: '',
          shareTitle: '',
          shareUrl: ''
        },
        dataRule: {
          sharePageInfo: [
            {required: true, message: '邀请文案不能为空', trigger: 'blur'}
          ],
          shareType: [
            {required: true, message: '选择类型', trigger: 'blur'}
          ],
          sharePageShareUrl: [
            {
              pattern: /(http|https|yiban):\/\/([\w.]+\/?)\S*/,
              required: true,
              message: '邀请卡分享二维码链接不能为空',
              trigger: 'blur'
            }
          ],
          shareTitle: [
            {required: true, message: '分享标题不能为空', trigger: 'blur'}
          ],
          shareDesc: [
            {required: true, message: '分享文案不能为空', trigger: 'blur'}
          ],
          shareUrl: [
            {pattern: /(http|https|yiban):\/\/([\w.]+\/?)\S*/, required: true, message: '分享链接不能为空', trigger: 'blur'}
          ]
        },
        dateSelect: [
          {
            label: '邀请好友',
            value: 1
          }, {
            label: '书籍分享',
            value: 2
          }, {
            label: '公益活动分享',
            value: 3
          }, {
            label: '知识彩蛋分享',
            value: 4
          }, {
            label: '伴学记录分享',
            value: 5
          }, {
            label: '学习记录分享',
            value: 6
          }, {
            label: '笔记分享',
            value: 7
          }, {
            label: '个人助力海报',
            value: 8
          }, {
            label: '团队助力海报',
            value: 9
          }, {
            label: '学习成就卡分享',
            value: 10
          }
        ],
        url: '',
        dialogVisible: false,
        dialogImageUrls: '',
        title: ''
      }
    },
    mounted() {
      this.url = this.$http.adornUrl(
        `/operate/shareInfo/upload?token=${this.$cookie.get('token')}`
      )
    },
    methods: {
      init(id) {
        this.dataForm = {}
        this.dataForm.id = id || 0
        this.fileLists = []
        this.visible = true
        this.$nextTick(() => {
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(
                `/operate/shareInfo/info/${this.dataForm.id}`
              ),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                var json = []
                data.shareInfo.sharePageImageUrls.forEach(item => {
                  var obj = {
                    url: item
                  }
                  json.push(obj)
                })
                this.fileLists = json
                this.dataForm = data.shareInfo
                if (data.shareInfo.shareType === 2) {
                  this.placeholders = '[nickname]邀你共读《[bookname]》'
                  this.disableds = true
                  this.dataForm.shareTitle = '[nickname]邀您共读《[bookname]》'
                  this.dataForm.shareDesc = '【时间点亮梦想，用心陪伴成长】'
                  this.dataForm.shareImg = 'https://yiban-app-resource.oss-cn-beijing.aliyuncs.com/wx-info-dev/shareInfo_image/20190813626d9d7611534ea69b38fce539480374.jpg'
                } else if (data.shareInfo.shareType === 7) {
                  if(data.shareInfo.shareCardStyles) {
                    this.invitecard = data.shareInfo.shareCardStyles
                    this.invitecard.map((item, index) => {
                      if(item.thumbImg) {
                        item.fileList = [{url:item.thumbImg,name:'缩略图'}]
                      }
                    })
                  }
                  this.placeholders = ''
                  this.disableds = true
                  this.dataForm.shareTitle = '《[bookname]》读书笔记'
                  this.dataForm.shareDesc = '默认显示笔记内容'
                  this.dataForm.shareImg = 'https://yiban-app-resource.oss-cn-beijing.aliyuncs.com/wx-info-dev/shareInfo_image/20190813626d9d7611534ea69b38fce539480374.jpg'
                } else {
                  this.placeholders = '[nickname]为分享者昵称，例：[nickname]邀请您一起学习'
                  this.disableds = false
                }
              }
            });
          }
        });
      },
      changetype(id) {
        let name = ''
        this.dateSelect.map((item)=> {
          if(id == item.value) {
            name = item.label
          }
        })
        return name
      },
      checkcolor(e) {
        if(e.srcElement.value.indexOf('#')>-1&&(e.srcElement.value.split('#')[1].length === 3||e.srcElement.value.split('#')[1].length === 6)){
          e.srcElement.style.border = '1px solid #67c23a'
        } else {
          e.srcElement.style.border = '1px solid red'
          this.$message({
            message: "请输入正确的颜色格式",
            type: "warning",
          });
        }
      },
      checkstylename(e) {
        if(e.srcElement.value){
          e.srcElement.style.border = '1px solid #67c23a'
        } else {
          e.srcElement.style.border = '1px solid red'
          this.$message({
            message: "请输入样式名称",
            type: "warning",
          });
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(response, file, fileList, index) {
        if (response && response.code === 0) {
          this.invitecard[index].thumbImg = response.url
        } else {
          this.$message.error(response.msg)
        }
      },
      deleteinvite(index) {
        this.invitecard.splice(index, 1)
      },
    }
  }
</script>
<style>
  .noChange .el-form-item__label{
    color: #bbb!important;
  }
  .noteshare .el-upload-list--picture-card{
    display: none;
  }
  .noteshare .el-upload-list__item-name {
    width: 80px;
    overflow : hidden;
    text-overflow: ellipsis;
  }
</style>
<style lang="scss" scoped>
  img{
    width: 100%;
    max-height: 100%;
    border-radius: 4px;
  }
  .invitecardbg{
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #efefef;
  }
  .flexinvite{
    display: flex;
    .img{
      width: 150px;
      height: 150px;
    }
    .flex{
      margin: 10px 0;
      display: flex;
      .title{
        width: 100px;
        text-align: right;
        margin-right: 20px;
        margin-left: 30px;
      }
    }
  }
</style>
